<template>
	<view class="outBox" @click.stop="closeInfo">
		<u-navbar leftText="我的收入" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '我的收入' }}</text>
			</view>
		</u-navbar>
		<VideoBox>
			<template #content>
				<view class="content">
					<view class="topFilter">
						<view class="selectTime">
							<ep-select v-model="selectTime" :options="options" @change="changeTime"></ep-select>
						</view>

					</view>
					<view class="user">
						<view class="img">
							<image :src="userInfo.avatar" mode="scaleToFill"></image>
						</view>
						<view class="name">
							{{userInfo.nickName}}
						</view>
						<!-- 	<view class="tip" v-if="infoDetails.customerManagerName">
              <text>上级账户：{{infoDetails.customerManagerName}}</text>
              <view class="btn">
                解绑
              </view>
            </view> -->
					</view>
					<view class="boxs">
						<view class="box">
							<view class="one">
								<text class="value">{{infoDetails.monthAchievement}}</text>
								<view class="label" @click.stop="handleShowInfoBox">
									<text>当月业绩总金额</text>
									<image class="wenhao" style="width: 32rpx;" src="/static/reservation/img2.png"
										mode="widthFix" />
									<view class="showInfoBox" :style="{
			  									background:`url(${infoBg})`,
			  									backgroundSize:'100% 100%',
			  									display: showInfoBox ? 'block' : 'none'
			  													}">
										<view class="tit">
											<text>业绩台/组局台判定规则：</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>（0个488套餐）：</text>
											<text style="color:#0FC6C2">小于等于720</text>
											<text>元，算组局台，记录组局/VIP组局奖励。</text>
											<text style="color:#0FC6C2">大于720</text>
											<text>元，算业绩台，记录业绩金额。</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>（1个488套餐）：</text>
											<text style="color:#0FC6C2">小于等于1308</text>
											<text>元，算组局台，记录组局/VIP组局奖励。</text>
											<text style="color:#0FC6C2">大于1308</text>
											<text>元，算业绩台，记录业绩金额。</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>（2个488套餐）：</text>
											<text style="color:#0FC6C2">小于等于1796</text>
											<text>元，算组局台，记录组局/VIP组局奖励。</text>
											<text style="color:#0FC6C2">大于1796</text>
											<text>元，算业绩台，记录业绩金额。</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>（3个488套餐）：</text>
											<text style="color:#0FC6C2">小于等于2284</text>
											<text>元，算组局台，记录组局/VIP组局奖励。</text>
											<text style="color:#0FC6C2">大于2284</text>
											<text>元，算业绩台，记录业绩金额。</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>4个488套餐，阈值为2772元。</text>
										</view>
										<view class="text" style="margin-bottom: 32rpx">
											<text style="padding-right: 10rpx;">*</text>
											<text>5个488套餐，阈值为3240元。</text>
										</view>
										<view class="text">
											<text style="padding-right: 10rpx;">*</text>
											<text>依此类推</text>
										</view>
									</view>

								</view>
							</view>
							<view class="one">
								<text class="value">{{infoDetails.invitationNum}}</text>
								<text class="label">当月邀约数量</text>
							</view>
							<view class="one">
								<text class="value">{{infoDetails.setsNum || 0}}</text>
								<text class="label">当月组局数量</text>
							</view>
							<view class="one">
								<text class="value">{{infoDetails.setsVipNum || 0}}</text>
								<text class="label">当月VIP组局数量</text>
							</view>
							<view class="one">
								<text class="value">{{infoDetails.ticketPrice || 0}}</text>
								<view class="label label2">
									<text style="margin-bottom: 10rpx;">当月发起拼卡</text>
									<text>门票总金额</text>
								</view>
							</view>
							<view class="one">
								<text class="value">{{infoDetails.shareTicketPrice || 0}}</text>
								<view class="label label2">
									<text style="margin-bottom: 10rpx;">当月分享拼卡</text>
									<text>门票总金额</text>
								</view>
							</view>
							<view class="one">
								<text class="value">{{infoDetails.ticketNum || 0}}</text>
								<view class="label label2">
									<text style="margin-bottom: 10rpx;">当月发起拼卡</text>
									<text>数量</text>
								</view>
							</view>
							<view class="one"></view>
						</view>
						<!--     <swiper class="swiper" circular :indicator-dots="true" :autoplay="false" indicator-color="#26504d"
                    indicator-active-color="#2bbfba" :style="{height:showInfoBox ? '1500rpx' : '400rpx'}" @change="changeSwiper">
              <swiper-item>
             

              </swiper-item>
              <swiper-item>
                <view class="box">
                  <view class="one">
                    <text class="value">{{infoDetails.monthAchievement}}</text>
                    <view class="label" @click.stop="handleShowInfoBox">
                      <text>本月业绩</text>
                      <image class="wenhao" style="width: 32rpx;" src="/static/reservation/img2.png" mode="widthFix" />
                      <view class="showInfoBox" :style="{
										background:`url(${infoBg})`,
										backgroundSize:'100% 100%',
										display: showInfoBox ? 'block' : 'none'
														}">
                        <view class="tit">
                          <text>业绩台/组局台判定规则：</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>（0个488套餐）：</text>
                          <text style="color:#0FC6C2">小于等于720</text>
                          <text>元，算组局台，记录组局/VIP组局奖励。</text>
                          <text style="color:#0FC6C2">大于720</text>
                          <text>元，算业绩台，记录业绩金额。</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>（1个488套餐）：</text>
                          <text style="color:#0FC6C2">小于等于1308</text>
                          <text>元，算组局台，记录组局/VIP组局奖励。</text>
                          <text style="color:#0FC6C2">大于1308</text>
                          <text>元，算业绩台，记录业绩金额。</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>（2个488套餐）：</text>
                          <text style="color:#0FC6C2">小于等于1796</text>
                          <text>元，算组局台，记录组局/VIP组局奖励。</text>
                          <text style="color:#0FC6C2">大于1796</text>
                          <text>元，算业绩台，记录业绩金额。</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>（3个488套餐）：</text>
                          <text style="color:#0FC6C2">小于等于2284</text>
                          <text>元，算组局台，记录组局/VIP组局奖励。</text>
                          <text style="color:#0FC6C2">大于2284</text>
                          <text>元，算业绩台，记录业绩金额。</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>4个488套餐，阈值为2772元。</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>5个488套餐，阈值为3240元。</text>
                        </view>
                        <view class="text" style="margin-bottom: 32rpx">
                          <text style="padding-right: 10rpx;">*</text>
                          <text>依此类推</text>
                        </view>
                      </view>

                    </view>
                  </view>

                  <view class="one">
                    <text class="value">{{infoDetails.invitationNum}}</text>
                    <text class="label">邀约数量</text>
                  </view>
                  <view class="one">
                    <text class="value">{{infoDetails.setsNum}}</text>
                    <text class="label">组局数量</text>
                  </view>
                  <view class="one">
                    <text class="value">{{infoDetails.setsVipNum}}</text>
                    <text class="label">VIP组局数量</text>
                  </view>
                </view>
              </swiper-item>
            </swiper> -->
					</view>
					<view class="box box2">
						<view class="one" @click="getnav('/pages/distribution/detailed')">
							<image :src="'../../static/mine/icon11.png'" mode="widthFix"></image>
							<text>收入明细</text>
						</view>
						<view class="one" @click="getnav('/pages/distribution/system')">
							<image :src="'../../static/mine/icon12.png'" mode="widthFix"></image>
							<text>我的社区</text>
						</view>
					</view>
					<view class="btns">
						<view class="btnOut">
							<view class="btn btn1" @click="getnav('/pages/mine/withdrawal')">
								<text>提现</text>
							</view>
						</view>

						<view class="btn btn2" @click="getnav('/pages/mine/withdrawalRecords')">
							<text>提现记录</text>
						</view>
					</view>
				</view>
			</template>
		</VideoBox>
	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'
	import infoBg from "@/static/order/bg1.png";
	import {
		myIncomeApi,
		saleCenterInfo,
		monthListApi
	} from '../../api/api'
	import VideoBox from "@/components/VideoBox/index.vue";
	export default {
		components: {
			VideoBox
		},
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				infoBg: infoBg,
				videoUrl: this.$videoUrl,
				baseImgUrl2: this.$baseImgUrl2,
				infoDetails: {
					// 总金额
					totalPrice: '',
					// 待分红
					waitingCashPrice: '',
					// 上级
					customerManagerName: '',
					// 上级id
					customerManagerId: '',
				},
				userInfo: '',
				showInfoBox: false,
				selectTime: '',
				options: [],

			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.getMonthList()

			this.userInfo = uni.getStorageSync("userInfo")

			console.log(this.userInfo, "this.userInfo");
		},
		methods: {
			// 获取月份列表
			async getMonthList() {
				const res = await monthListApi()
				if (res.code == 200) {
					this.options = res.data.map(item => {
						return {
							value: item,
							label: item,
						}
					})
					this.selectTime = res.data[0]
					this.getSaleCenterInfo()
				}
			},
			changeTime() {
				this.getSaleCenterInfo()
			},
			// 获取数据
			async getSaleCenterInfo() {
				const res = await myIncomeApi(this.selectTime)
				this.infoDetails = res.data
			},
			handleShowInfoBox() {
				console.log("执行了");
				this.showInfoBox = true
			},
			changeSwiper() {
				this.showInfoBox = false
			},
			closeInfo() {
				this.showInfoBox = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topFilter {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.right {
			text {
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #0FC6C2;
			}
		}
	}

	.selectTime {
		width: 200rpx;
	}

	.boxs {
		height: 630rpx;
	}

	.showInfoBox {
		position: absolute;
		width: 515rpx;
		box-sizing: border-box;
		padding: 68rpx 50rpx 1rpx 45rpx;
		z-index: 8;
		top: 100%;
		left: -5rpx;

		.tit {
			margin: 0 0 30rpx !important;
			font-size: 28rpx;
			color: #0FC6C2;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.text {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: justify;
			font-style: normal;
			margin-bottom: 20rpx;

			text {
				margin-right: 0 !important;
			}
		}

	}

	.label2 {
		display: flex;
		flex-direction: column;
	}

	.swiper {
		height: 400rpx;

		/deep/ .wx-swiper-dot {
			width: 20px;
			height: 5px;
			border-radius: 5rpx;
		}

		/deep/ .wx-swiper-dot-active {
			border-radius: 5rpx;
		}
	}



	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.btns {
		margin-top: 32rpx;

		.btnOut {
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
		}


		.btn {
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			border-radius: 64rpx;

			text {
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.btn1 {
			background: #0FC6C2;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
			margin-bottom: 22rpx;
		}

		.btn2 {
			border: 2rpx solid #0FC6C2;
		}

	}


	.box2 {
		padding: 48rpx !important;
		height: 164rpx !important;

		.one {
			flex-direction: row !important;
			justify-content: center !important;

			text {
				font-weight: 600;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.box {
		display: flex;
		flex-wrap: wrap;
		height: 630rpx;
		box-sizing: border-box;
		border-radius: 60rpx;
		background: rgba(0, 0, 0, 0.52);
		color: #fff;
		padding: 76rpx 98rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		border: 2rpx solid #5c7577;

		.one {
			flex: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: space-between;
			margin-bottom: 20rpx;

			image {
				width: 68rpx;
				margin-right: 22rpx;
			}

			.label {
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
				line-height: 28rpx;
				text-align: center;
			}

			.label {
				display: flex;
				align-items: center;
				position: relative;

				image {
					margin-left: 10rpx;
				}

				.wenhao {
					position: absolute;
					right: -60rpx;
				}
			}

			.value {
				font-size: 50rpx;
				color: #FFFFFF;
			}
		}
	}

	.user {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 0rpx;

		.tip {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 28rpx;
				margin-right: 20rpx;
				color: #7a7d97;
			}

			.btn {
				font-size: 20rpx;
				color: #fff;
				background-color: #89d735;
				padding: 5rpx 20rpx;
				border-radius: 20rpx;
			}
		}

		.img {
			width: 192rpx;
			height: 192rpx;
			border-radius: 85rpx;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.name {
			font-weight: 600;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
		}
	}


	.list {
		margin-top: 40rpx;
		color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			align-items: center;
			color: #fff;
			padding: 0 40rpx;
			background-color: #0e0d15;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.left {
				display: flex;
				justify-content: center;
				flex-direction: column;

				.time {
					font-size: 22rpx;
					color: #8b8b8b;
				}
			}
		}

		.tit {
			margin-top: 40rpx;
		}
	}

	.content {
		position: relative;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		z-index: 99;
	}

	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {}
</style>